<template>
	<view class="wrapper">
		<u-input placeholder="请输入内容" border="surround" v-model="value" clearable></u-input>
		<u-button text="生成" type="primary" @click="onPrimaryClick"></u-button>
		<u-image :showLoading="true" :src="src" mode="widthFix" width="100%" height="auto"> </u-image>
		<u-loading-page :loading="isLoading" bg-color="rgba(0, 0, 0, .3)" loadingText="生成中"></u-loading-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				src: require('../../static/img/people.png'),
				isLoading: false
			}
		},
		methods: {
			onPrimaryClick() {
				if (!this.value) {
					uni.showToast({
						title: '请输入生成内容',
						icon: 'none'
					})
					return
				}
				this.isLoading = true
				uni.request({
					url: 'https://api.zuzo.cc/api/zt.php',
					method: 'get',
					responseType: "arraybuffer",
					data: {
						msg: this.value
					},
					success: res => {
						this.isLoading = false
						let resData = res.data
						// 生成8位为符号整形数组
						const arrBuf = new Uint8Array(resData)
						const base64 = "data:image/png;base64," + uni.arrayBufferToBase64(arrBuf)
						this.src = base64
					},
					fail: err => {
						this.isLoading = false
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrapper {
		display: flex;
		flex-direction: column;
		justify-content: center;

		/deep/ button {
			margin: 20px 0;
		}
		/deep/ .u-image  {
			height: auto !important;
		}
	}
</style>